<!--
* @Author: zhangjing
* @Date: 2025-01-07 13:09:14
* @Description: 血压记录=>
-->
<template>
	<view class="pageview flex flex-direction">
		<view class="top-wrap">
			<tabs @changeTab="changeTab"></tabs>
		</view>
		<view class="main flex-sub">
			<view class="card">
				<timebar :timeType="timeType" @updateData="updateData" ref="timebar"></timebar>
				<bpChart ref="bpChart"></bpChart>
			</view>
			<view class="card">
				<view class="flex align-center justify-center">
					<view class="flex align-center">
						<view class="line" style="background: #eb5f8c;"></view>
						<text class="u-m-l-10">收缩压</text>
					</view>
					<view class="flex align-center u-m-l-50">
						<view class="line" style="background: #caebe4;"></view>
						<text class="u-m-l-10">舒张压</text>
					</view>
				</view>
				<view class="bpbar u-m-t-20">
					<!-- <bpStep size="lg"></bpStep> -->
					<view class="flex align-center">
						<view class="step" v-for="(item, index) in bpSteps" :style="{
								background: item.color
							}"></view>
					</view>
					<view class="flex align-center">
						<view class="step_text" v-for="(item, index) in bpSteps" :style="{
								color: item.color
							}">
							{{ item.text }}
						</view>
					</view>
				</view>
				<!-- <view class="flex align-center">
					<view class="flex-sub">
						<view class="w-title grid-text">血压平均值</view>
						<view class="w-num">12</view>
					</view>
					<view class="flex-sub">
						<view class="w-title grid-text">心率平均值</view>
						<view class="w-num">12</view>
					</view>
				</view> -->
			</view>
			<view class="card count">
				<u-grid :border="true">
					<u-grid-item v-for="(item, index) in bpInfo" :key="index">
						<view class="w-title grid-text">{{ item.text }}</view>
						<view class="w-num">{{ item.num }}次</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<footbar deviceTypeCode="BP2A"></footbar>
	</view>
</template>

<script>
	import tabs from '@/components/tabs';
	import timebar from '@/components/timebar';
	import bpChart from './components/bpChart.vue';
	import bpStep from '@/components/bpStep';
	import footbar from './components/footbar.vue';
	import {
		mapState
	} from 'vuex';
	import {
		formatEveryDay
	} from '@/utils/index.js';
	import {
		addZero
	} from '@/uni_modules/zxz-uni-datetime-picker/components/zxz-uni-datetime-picker/zxz-util.js';
	import {
		bpSteps
	} from '@/utils/enum';
	export default {
		data() {
			return {
				timeType: 'date',
				curIndex: 0,
				bpSteps,
				bpInfo: [{
						value: '',
						num: '',
						text: '重度'
					},
					{
						value: '',
						num: '',
						text: '中度'
					},
					{
						value: '',
						num: '',
						text: '轻度'
					},
					{
						value: '',
						num: '',
						text: '正常偏高'
					},
					{
						value: '',
						num: '',
						text: '正常'
					},
					{
						value: '',
						num: '',
						text: '偏低'
					}
				],
				weightData: []
			};
		},
		components: {
			tabs,
			timebar,
			bpChart,
			bpStep,
			footbar
		},
		computed: {
			...mapState(['curAccount'])
		},
		created() {},
		methods: {
			updateData(timeInfo) {
				let param = {
					startTime: timeInfo.startDay + ' 00:00:00',
					endTime: timeInfo.endDay + ' 23:59:59',
					type: ['date', 'week', 'yearMonth', 'year'].findIndex(item => item == this.timeType)
				};
				this.getBP2ACount(param);
				this.getBP2ACountOfTj(param);
			},
			getBP2ACount(param) {
				this.$postAction(this.$deviceapi.getBP2ACount, {
					detailId: this.curAccount.detailId,
					...param
				}).then(da => {
					this.weightData = da || [];
					this.updateChart();
				});
			},
			getBP2ACountOfTj(param) {
				this.$postAction(this.$deviceapi.getBP2ACountOfTj, {
					detailId: this.curAccount.detailId,
					...param
				}).then(da => {
					this.bpInfo.forEach(item => {
						item.num = da[item.text] || 0;
					});
				});
			},
			updateChart() {
				let categories = [],
					data1 = [],
					data2 = [],
					data3 = [],
					data4 = [],
					data5 = [],
					data6 = [],
					data7 = [],
					data8 = [],
					data13 = [],
					data14 = [],
					data15 = [],
					data16 = [],
					data17 = [],
					data18 = [];
				if (this.timeType == 'date') {
					for (var i = 0; i < 24; i++) {
						categories.push(addZero(i) + ':00');
					}
				} else if (this.timeType == 'year') {
					for (var i = 0; i < 12; i++) {
						categories.push(this.$refs.timebar.yearWeek + '-' + addZero(i + 1));
					}
				} else {
					let list = formatEveryDay(this.$refs.timebar.startDay, this.$refs.timebar.endDay);
					categories = [...list];
				}
				console.log('categories', categories);
				if (this.weightData && this.weightData.length > 0) {
					this.weightData.forEach(item => {
						data1.push(item.systolic_pressure || null);
						data2.push(item.diastolic_pressure || null);
						if (item.systolic_pressure >= 180) {
							data3.push(item.systolic_pressure);
							data4.push(null);
							data5.push(null);
							data6.push(null);
							data7.push(null);
							data8.push(null);
						} else {
							data3.push(null);
							if (item.systolic_pressure >= 160) {
								data4.push(item.systolic_pressure);
								data5.push(null);
								data6.push(null);
								data7.push(null);
								data8.push(null);
							} else {
								data4.push(null);
								if (item.systolic_pressure >= 140) {
									data5.push(item.systolic_pressure);
									data6.push(null);
									data7.push(null);
									data8.push(null);
								} else {
									data5.push(null);
									if (item.systolic_pressure >= 130) {
										data6.push(item.systolic_pressure);
										data7.push(null);
										data8.push(null);
									} else {
										data6.push(null);
										if (item.systolic_pressure >= 90) {
											data7.push(item.systolic_pressure);
											data8.push(null);
										} else {
											data7.push(null);
											data8.push(item.systolic_pressure||null);
										}
									}
								}
							}
						}
						if (item.diastolic_pressure >= 110) {
							data13.push(item.diastolic_pressure);
							data14.push(null);
							data15.push(null);
							data16.push(null);
							data17.push(null);
							data18.push(null);
						} else {
							data13.push(null);
							if (item.diastolic_pressure >= 100) {
								data14.push(item.diastolic_pressure);
								data15.push(null);
								data16.push(null);
								data17.push(null);
								data18.push(null);
							} else {
								data14.push(null);
								if (item.diastolic_pressure >= 90) {
									data15.push(item.diastolic_pressure);
									data16.push(null);
									data17.push(null);
									data18.push(null);
								} else {
									data15.push(null);
									if (item.diastolic_pressure >= 85) {
										data16.push(item.diastolic_pressure);
										data17.push(null);
										data18.push(null);
									} else {
										data16.push(null);
										if (item.diastolic_pressure >= 60) {
											data17.push(item.diastolic_pressure);
											data18.push(null);
										} else {
											data17.push(null);
											data18.push(item.diastolic_pressure||null);
										}
									}
								}
							}
						}
					});
				}
				this.$refs.bpChart.getServerData(
					categories,
					[{
							name: '收缩压',
							type: 'line',
							color: '#eb5f8c',
							connectNulls: true,
							data: data1,
							disableLegend: true,
						},

						{
							name: '舒张压',
							type: 'line',
							color: '#caebe4',
							connectNulls: true,
							data: data2,
							disableLegend: true,
						},
						{
							name: '收缩压重度',
							type: 'point',
							color: '#e93c42',
							connectNulls: true,
							data: data3
						},
						{
							name: '收缩压中度',
							type: 'point',
							color: '#fe6f09',
							connectNulls: true,
							data: data4
						},
						{
							name: '收缩压轻度',
							type: 'point',
							color: '#ff9600',
							connectNulls: true,
							data: data5
						},
						{
							name: '收缩压正常高值',
							type: 'point',
							color: '#ffbf0e',
							connectNulls: true,
							data: data6
						},
						{
							name: '收缩压正常',
							type: 'point',
							color: '#59be58',
							connectNulls: true,
							data: data7
						},
						{
							name: '收缩压偏低',
							type: 'point',
							color: '#56a6fb',
							connectNulls: true,
							data: data8
						},

						{
							name: '舒张压重度',
							type: 'point',
							color: '#e93c42',
							connectNulls: true,
							data: data13
						},
						{
							name: '舒张压中度',
							type: 'point',
							color: '#fe6f09',
							connectNulls: true,
							data: data14
						},
						{
							name: '舒张压轻度',
							type: 'point',
							color: '#ff9600',
							connectNulls: true,
							data: data15
						},
						{
							name: '舒张压正常高值',
							type: 'point',
							color: '#ffbf0e',
							connectNulls: true,
							data: data16
						},
						{
							name: '舒张压正常',
							type: 'point',
							color: '#59be58',
							connectNulls: true,
							data: data17
						},
						{
							name: '舒张压偏低',
							type: 'point',
							color: '#56a6fb',
							connectNulls: true,
							data: data18
						},
					],
					this.timeType == 'date' ? '' : this.timeType == 'year' ? 'xAxissemester' : 'xAxisDay',
					this.timeType == 'date' ? 5 : this.timeType == 'year' ? 6 : 8
				);
			},
			changeWeightTab(index) {
				if (this.curIndex != index) {
					this.curIndex = index;
					this.updateChart();
				}
			},
			changeTab(info) {
				this.timeType = info.value;
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import 'pro.scss';

	.line {
		width: 40upx;
		height: 6upx;
		border-radius: 5upx;
	}

	.bpbar {
		.step {
			flex: 1;
			height: 10upx;
			border-radius: 50upx;
			margin: 0 5upx;
		}

		.step_text {
			flex: 1;
			text-align: center;
			font-size: 24upx;
			margin: 10upx 5upx 0;
		}
	}
</style>